<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1322088_9peeabpfbrf.css"/>
		<link rel="stylesheet" type="text/css" href="js/layui/css/layui.css"/>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<style type="text/css">
		.layui-table-header .layui-table-cell{
			padding: 0 5px;
		}
		
		.layui-table-body .layui-table-cell{
			padding: 0 5px;
			height: 40px;
			line-height: 40px;
		}
		
		.goodsImg {
		    width: 40px;
		    height: 40px;
		    background: no-repeat center center;
		    background-size: cover;
		}
		
		.addOrder{
			height: 500px;
			overflow-y: auto;
			font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;
		}
		
		.add-btn{
			position: fixed;
			bottom: 50px;
			width: 100%;
		}
		
		.yingfujiner{
			border: 1px solid #dddddd;
			padding: 20px 10px;
			margin-top: -20px;
			border-top: 0;
			text-align: right;
		}
		
		.yingfujiner .ff6600{
			font-size: 20px;
		}
	</style>
	<body>
		<div class="container-fluid bg-white">
			<div class="addOrder">
				<form class="layui-form layui-form-pane" action="">
					<div class="add-top flex align-items-center">
						<div><span class="ff6600 mg-right-5 font15">*</span>经销商</div>
						<div>
							<select name="interest" lay-filter="aihao">
								<option value=""></option>
								<option value="0" selected="">写作</option>
								<option value="1">阅读</option>
								<option value="2">游戏</option>
								<option value="3">音乐</option>
								<option value="4">旅行</option>
						    </select>
						</div>
					</div>
					<div class="add-body">
						<table class="table table-bordered table-hover">
							<thead class="theads">
								<tr>
									<td style="width: 4%;"></td>
									<td style="width: 4%;"></td>
									<td style="width: 4%;">主图</td>
									<td style="width: 15%;">商品编码</td>
									<td style="width: 15%;">商品名称</td>
									<td style="width: 15%;">商品规格</td>
									<td style="width: 7%;">数量</td>
									<td style="width: 7%;">单位</td>
									<td style="width: 7%;" class="text-right">单价</td>
									<td style="width: 7%;" class="text-right">小计</td>
									<td style="width: 10%;" class="text-center">备注</td>
								</tr>
							</thead>
							<tbody class="list-item-table">
								<tr class="tr-item" v-for="(item, index) in goodsList" :key="index">
									<td class="text-center">{{index+1}}</td>
									<td class="text-center"><span @click="subtract(index)" class="iconfont icon-jian"></span></td>
									<td><div class="imgbox"><img :src="item.picture" ></div></td>
									<td>{{item.coding}}</td>
									<td class="goodsName">{{item.name}}</td>
									<td class="goodsName">{{item.specification}}</td>
									<td class="text-center"><input  @keyup="contMin(index,item.unitPrice,item.quantity)" type="text" v-model="item.quantity" /></td>
									<td>{{item.unit}}</td>
									<td>{{item.unitPrice}}</td>
									<td class="text-right">{{item.subtotal}}</td>
									<td style="line-height: 1.2;font-size: 12px;"><i @click="handlEdit(index,item.comment)" class="iconfont icon-xiewenzhang"></i>{{item.comment}}</td>
								</tr>
								<tr class="tr-item addRow">
									<td  class="text-center"></td>
									<td class="text-center"><span @click="showAddRow" class="iconfont icon-jia"></span></td>
									<td @click="showAddRow" style="background: #fbfbfb;" colspan="3">选择商品 <i class="iconfont icon-diandian pull-right"></i></td>
									<td></td>
									<td class="text-center"></td>
									<td></td>
									<td></td>
									<td class="text-right"></td>
									<td></td>
								</tr>
								<tr class="heji">
									<td>合计</td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td  class="text-center"></td>
									<td></td>
									<td></td>
									<td class="text-right">{{countSum}}</td>
									<td></td>
								</tr>
							</tbody>
						</table>
						<div class="yingfujiner">应付金额：<span class="ff6600">{{countSum}}</span></div>
					</div>
					<div class="add-footer">
						<div class="fo-item-box">
							<div class="item-left">收货信息</div>
							<div class="item-right">
								<span @click="showAddrass"><i class="iconfont icon-xiewenzhang"></i>客户名称：{{showArass.clientName}}</span>
								<span>收货人：{{showArass.consignee}}</span>
								<span>联系电话：{{showArass.phone}}</span>
								<span>收货地址：{{showArass.city}}{{showArass.addrass}}</span>
							</div>
						</div>
						<div class="fo-item-box">
							<div class="item-left">交货日期</div>
							<div class="item-right"><input type="text" class="layui-input widht60" id="jiaohuo" placeholder="yyyy-MM-dd HH:mm:ss"></div>
						</div>
						<div class="fo-item-box" style="height: auto;min-height: 50px;">
							<div class="item-left">发票信息</div>
							<div class="item-right FaBiao">
								<select name="interest" lay-filter="fb">
									<option value=""></option>
									<option value="0" selected="">不开发票</option>
									<option value="1">增值税普通发票</option>
									<option value="2">增值税专用发票</option>
								</select>
								<div v-if="FaBiao != 0" class="showFaBiao-box">
									<div v-if="FaBiao == 1" class="FaBiao-item">
										<span><i @click="showFaBiaoModel" class="iconfont icon-xiewenzhang"></i>发票抬头：{{FaBiaoJson.invoiceTitle}}</span>
										<span>发票内容：{{FaBiaoJson.invoiceContent}}</span>
										<span>纳税人识别号：{{FaBiaoJson.taxpayer}}</span>
									</div>
									<div v-if="FaBiao == 2" class="FaBiao-item">
										<span><i @click="showFaBiaoModel" class="iconfont icon-xiewenzhang"></i>发票抬头：{{FaBiaoJson.invoiceTitle}}</span>
										<span>发票内容：{{FaBiaoJson.invoiceContent}}</span>
										<span>纳税人识别号：{{FaBiaoJson.taxpayer}}</span>
										<span>地址：{{FaBiaoJson.address}}</span>
										<span>电话：{{FaBiaoJson.phone}}</span>
										<span>开户名称：{{FaBiaoJson.accountName}}</span>
										<span>开户银行：{{FaBiaoJson.depositBank}}</span>
										<span>银行账号：{{FaBiaoJson.bankAccount}}</span>
									</div>
								</div>
							</div>
						</div>
						<div class="fo-item-box">
							<div class="item-left">备注说明</div>
							<div class="item-right"><input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="" class="layui-input beizhu"></div>
						</div>
						<div class="fo-item-box">
							<div class="item-left">附件信息</div>
							<div class="item-right">
								<div><div class="uploadFile"><input accept="text/plain,image/jpeg,image/x-png,image/gif,application/x-zip-compressed,application/msword,application/msexcel,application/pdf,application/vnd.ms-excel" type="file" ref="file" @change="changeFile($event)" name="" id="" value="" /><i class="iconfont icon-xuanzewenjian1"></i></div>（单个附件最大支持20M，支持格式：PDF、Word、Excel、Txt、JPG、PNG、GIF、RAR、ZIP）</div>
								<div class="fileName">暂无附件</div>
							</div>
						</div>
					</div>
					<div class="add-btn">
						<button class="cancel" type="button">取消</button>
						<button class="confirm" type="button">保存</button>
					</div>
				</form>
			</div>
			
			<!-- 选择商品 -->
			<div class="addModel hidden">
				<div class="add-h">
					<div>选择商品</div>
					<div @click="showChangeClass($event)" :class="{show:show}" class="changeClass"><div>{{changeClassTitle}} <i class="iconfont icon-xiangshangjiantouarrowup-copy"></i></div>
						<div id="test13" class="demo-tree-more"></div>
					</div>
				</div>
				<div class="add-b">
					<table id="goodsList" lay-filter="goodsList"></table>
				</div>
				<div class="add-f">
					<button @click="closeRow" type="button" class="cancel">取消</button>
					<button @click="addRow" type="button" class="confirm">确定</button>
				</div>
			</div>
			
			<!-- 发票类型 -->
			<div class="faBiaoMode" :class="{hidden:faBiaoMode}">
				<div @click="hiddenFaBiao" class="closeModel"></div>
				<div class="fb-box">
					<div class="title">发票类型</div>
					<div class="fb-item-box">
						<div class="item-input">
							<span>发票抬头</span>
							<input v-model="FaBiaoJson.invoiceTitle" type="text" name="" id="" value="" />
						</div>
						<div class="item-input">
							<span>发票内容</span>
							<input v-model="FaBiaoJson.invoiceContent" type="text" name="" id="" value="" />
						</div>
						<div class="item-input">
							<span>纳税人识别号</span>
							<input v-model="FaBiaoJson.taxpayer" type="text" name="" id="" value="" />
						</div>
						<div v-if="FaBiao == 2" class="item-input">
							<span>开户名称</span>
							<input v-model="FaBiaoJson.accountName" type="text" name="" id="" value="" />
						</div>
						<div v-if="FaBiao == 2" class="item-input">
							<span>开户银行</span>
							<input v-model="FaBiaoJson.depositBank" type="text" name="" id="" value="" />
						</div>
						<div v-if="FaBiao == 2" class="item-input">
							<span>银行账号</span>
							<input v-model="FaBiaoJson.bankAccount" type="text" name="" id="" value="" />
						</div>
						<div v-if="FaBiao == 2" class="item-input">
							<span>地址</span>
							<input v-model="FaBiaoJson.address" type="text" name="" id="" value="" />
						</div>
						<div v-if="FaBiao == 2" class="item-input">
							<span>电话</span>
							<input v-model="FaBiaoJson.phone" type="text" name="" id="" value="" />
						</div>
					</div>
					<div class="add-f" style="margin-top: 30px;">
						<button @click="hiddenFaBiao" type="button" class="cancel">取消</button>
						<button type="button" class="confirm">确定</button>
					</div>
				</div>
			</div>
			
			<!-- 收货信息弹出层 -->
			<div class="dh-modal newAddAddrass">
				<div class="close-modal"></div>
				<div class="box-modal">
					<!-- 收货地址列表 -->
					<div class="sh-box-0">
						<div class="sh-h"><span>修改收货地址</span><span @click="newAndEditAddrass('',1)" style="margin-left: 30px;"><i class="iconfont icon-tianjia"></i> 新增收货地址</span></div>
						<div class="sh-b">
							<div v-for="(item, index) in addrList" :key="index" class="sh-item flex space-between">
								<div @click="changeAdr($event,item)" class="sh-left flex">
									<i class="iconfont icon-gou1"></i>
									<div class="ellipsis" :title="item.clientName+'，'+item.consignee+'，'+item.phone+'，'+item.city+item.addrass">
										{{item.clientName}}，{{item.consignee}}，{{item.phone}}，{{item.city}}{{item.addrass}}
									</div>
								</div>
								<div class="sh-right">
									<span @click="newAndEditAddrass(item,2,index)" class="iconfont icon-xiewenzhang"> 修改</span><span  @click="delAdd(item,index)"  class="iconfont icon-shanchu"> 删除</span>
								</div>
							</div>
						</div>
						<div class="sh-f">
							<button @click="hiddenAddrass" type="button" class="cancel">取消</button>
							<button @click="confirmAdr" type="button" class="confirm">确定</button>
						</div>
					</div>
					<!-- 修改和新增收货地址 -->
					<div class="sh-box-0 editAddrass">
						<form action="" method="">
							<div class="sh-h">修改收货地址</div>
							<div class="sh-b edit">
								<div class="sh-b-left">
									<div><span>客户名称</span><input v-model="clientInfo.clientName" type="text"></div>
									<div><span>收货人</span><input v-model="clientInfo.consignee" type="text"></div>
									<div><span>联系电话</span><input v-model="clientInfo.phone" type="text"></div>
									<div style="position: relative;">
										<span>区域</span><input @click="showCityChange" v-model="clientInfo.city" type="text">
										<div class="showCity" v-if="showCity">
											<div class="flex changeAdd">
												<div class="province">
													<div @click="changeCity(item,1,index)" :class="{active:cityNumber.province == index}" class="item-province" v-for="(item,index) in province" :key="index">{{item.text}}</div>
												</div>
												<div class="city">
													<div @click="changeCity(item,2,index)" :class="{active:cityNumber.city == index}" class="item-city" v-for="(item,index) in city" :key="index">{{item.text}}</div>
												</div>
												<div class="region">
													<div @click="changeCity(item,3,index)" :class="{active:cityNumber.region == index}" class="item-region" v-for="(item,index) in region" :key="index">{{item.text}}</div>
												</div>
											</div>
											<div class="cont-btn">
												<button @click="cityCancel" type="button" class="cancel">取消</button>
												<button @click="cityConfirm" type="button" class="confirm">确定</button>
											</div>
										</div>
									</div>
									<div><span>详细地址</span><input v-model="clientInfo.addrass" type="text"></div>
								</div>
								<div class="sh-b-right"></div>
							</div>
							<div class="sh-f">
								<button @click="hiddenAddrass" type="button" class="cancel">取消</button>
								<button @click="editAdd" type="button" class="confirm">确定</button>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
		
		<script src="js/jquery-v3-3.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/new_file.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/Gather.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				var height = document.documentElement.clientHeight;
				console.log(height);
				$(".container-fluid").css({"height":(height-34)+"px"})
				$(".addOrder").css({"height":(height-90)+"px"})
			})
			
			$(window).resize(function(){
				var height = document.documentElement.clientHeight;
				$(".addOrder").css({"height":(height-90)+"px"})
			})
			
			layui.use(['form','table', 'layedit', 'laydate','tree'], function(){
				var form = layui.form,
					tree = layui.tree,
					table = layui.table,
				    layer = layui.layer,
				    layedit = layui.layedit,
				    laydate = layui.laydate;
					
					
				//分类模拟数据1
				var data1 = [{
					title: '手机数码'
					,id: 1
					,children: [{
						title: '手机'
						,id: 1000
						,children: [{
							title: '游戏手机'
							,id: 10001
				    },{
						title: '拍照手机'
						,id: 10002
					},{
						title: '全面屏手机'
						,id: 10003
					},{
						title: '对讲机'
						,id: 10004
					}]
					},{
					    title: '摄影摄像'
					    ,id: 1001
					    ,children:[{
						    title: '单反相机'
							,id: 10011
						  },
						  {
						    title: '数码相机'
							,id: 10012
						}]
					}]
				},{
					title: '电脑办公'
					,id: 2
					,children: [{
						title: '电脑整机'
						,id: 2000
					},{
						title: '笔记本'
						,id: 2001
					},
					{
						title: '台式机'
						,id: 2002
					}]
				},{
					title: '家用电器'
					,id: 3
					,children: [{
						title: '超薄电视'
						,id: 3000
					},{
						title: '全面屏电视'
						,id: 3001
					}]
				}]
				  
				//选择商品分类下拉列表	
				tree.render({
				    elem: '#test13'
				    ,data: data1
				    ,showLine: false  //是否开启连接线
					,click: function(obj){
					    layer.msg(JSON.stringify(obj.data));
						vm.changeClassTitle = obj.data.title;
					}
				});
				
				
				//发票信息
				form.on('select(fb)',function(data){
					vm.changeFaBiao(data.value)
					vm.FaBiao = data.value;
				})
				  
				//交货日期时间选择
				laydate.render({
				    elem: '#jiaohuo'
				    ,type: 'datetime'
				});
				
				
				// 数据列表渲染
				table.render({
					elem: '#goodsList'
					,data:DataArray2// data为数据库查到的数据
					,height: 450
					,cols: [[//以下field字段为为数据库相同,title为字段描述
						{type:'checkbox'}
						,{field:'mtype',align:"center",event: 'barDemo', width:50, title: '主图',templet:function(e){return '<div class="goodsImg" style="background-image: url('+ e.mtype +');"></div>'}}
						,{field:'userid', align:"center",width:165, title: '商品编码'}
						,{field:'uname', align:"center",width:165, title: '商品名称'}
						,{field:'sex',align:"center", width:150, title: '商品规格',}
						,{field:'rank',align:"center", width:90, title: '分类名称'}
						,{field:'scores',align:"center",width:80, title: '起订量'}
						,{field:'exptime',align:"center", width:70, title: '库存'}
						,{field:'money',align:"center", width:70, title: '预购'}
						,{field:'email',align:"center", width:70, title: '价格'}
						,{field:'scores',align:"center", edit: 'text', width:90, title: '下单数量'}
						,{field:'uptime',align:"center", width:70, title: '单位'}
					]]
					,page: true
				});
				
				//监听单元格下单数量编辑
				table.on('edit(goodsList)', function(obj){
				   console.log(obj);
				});
				
				//获取选中行的数据(商品选择)
				table.on('checkbox(goodsList)', function(obj){
					vm.changeList = table.checkStatus('goodsList').data
					console.log(vm.changeList);
				});
			})
			
			let province = cityData3[0].text
			let city = cityData3[0].children[0].text;
			let region = cityData3[0].children[0].children[0].text;
			var vm = new Vue({
				el:".container-fluid",
				data:{
					faBiaoMode:true,
					FaBiao:0,
					FaBiaoJson:{
						invoiceTitle:"",        //发票抬头
						invoiceContent:"",		//发票内容
						taxpayer:"",			//纳税人识别号
						accountName:"",			//开户名称
						depositBank:"",			//开户银行
						bankAccount:"",			//银行账号
						address:"",				//地址
						phone:""				//电话
					},
					changeClassTitle:"全部分类",
					subtotal:"178.20",
					show:false,
					countSum:0,
					showAddRowModel:false,
					changeList:[],
					goodsList:[
						{
							picture:"img/001.png",
							coding:"0987323456731345678",
							name:"【打折】 莎拉公主 奥地利水晶项链 天使泪水晶项链",
							specification:"	材质：水晶，颜色：橄榄绿",
							quantity:"1",
							unit:"件",
							unitPrice:"178.20",
							comment:"无"
						}
					],
					showCity:false,//是否显示选择城市弹出层
					province:[],//省
					city:[],    //市
					region:[],  //区
					cityNumber:{
						province:0,
						city:0,
						region:0
					},
					clientInfo:{//客户收货信息(用户输入的)
						clientName:"",
						consignee:"",
						phone:"",
						city:"",
						addrass:""
					},
					editIndex:-1,
					addrList:[//收货地址列表
						{
							clientName:"贵州新达共创科技有限公司",
							consignee:"张学友",
							phone:"18823811457",
							city:"贵州省贵阳市观山湖区",
							addrass:"新世界社区服务中心诚信北路富力中心A2栋1209"
						},
						{
							clientName:"贵阳西软弈博网络科技有限公司",
							consignee:"刘备",
							phone:"18823811457",
							city:"贵州省贵阳市观山湖区",
							addrass:"新世界社区服务中心诚信北路富力中心A2栋1209"
						},
						{
							clientName:"贵州新达共创科技有限公司",
							consignee:"张学友",
							phone:"18823811457",
							city:"贵州省贵阳市观山湖区",
							addrass:"新世界社区服务中心诚信北路富力中心A2栋1209"
						},
						{
							clientName:"贵阳西软弈博网络科技有限公司",
							consignee:"刘备",
							phone:"18823811457",
							city:"贵州省贵阳市观山湖区",
							addrass:"新世界社区服务中心诚信北路富力中心A2栋1209"
						},
						{
							clientName:"贵州新达共创科技有限公司",
							consignee:"张学友",
							phone:"18823811457",
							city:"贵州省贵阳市观山湖区",
							addrass:"新世界社区服务中心诚信北路富力中心A2栋1209"
						},
						{
							clientName:"贵阳西软弈博网络科技有限公司",
							consignee:"刘备",
							phone:"18823811457",
							city:"贵州省贵阳市观山湖区",
							addrass:"新世界社区服务中心诚信北路富力中心A2栋1209"
						},
						{
							clientName:"贵州新达共创科技有限公司",
							consignee:"张学友",
							phone:"18823811457",
							city:"贵州省贵阳市观山湖区",
							addrass:"新世界社区服务中心诚信北路富力中心A2栋1209"
						},
						{
							clientName:"贵阳西软弈博网络科技有限公司",
							consignee:"刘备",
							phone:"18823811457",
							city:"贵州省贵阳市观山湖区",
							addrass:"新世界社区服务中心诚信北路富力中心A2栋1209"
						},
						{
							clientName:"贵州新达共创科技有限公司",
							consignee:"张学友",
							phone:"18823811457",
							city:"贵州省贵阳市观山湖区",
							addrass:"新世界社区服务中心诚信北路富力中心A2栋1209"
						}
					],
					changeAdrJson:{},
					showArass:{//客户收货信息
						clientName:"",
						consignee:"",
						phone:"",
						city:"",
						addrass:""
					}
				},
				created() {
					this.province = cityData3
					this.city = cityData3[0].children
					this.region = cityData3[0].children[0].children
				},
				methods:{
					changeFile(e){//选择文件(附件)
						let Files = e.target.files[0];
						let Size = (Files.size/1024/1024).toFixed(2);
						if(Size < 20){
							$(".fileName").text(Files.name)
						}else{
							layer.alert('当前文件大小为：<span style="color:#ff6600;font-size:16px;">'+Size+'M</span><br><span style="color:#2196f3;font-size:15px;">单个文件大小不能超过 20M ！！！</span>');
						}
						console.log(e.target.value);
						console.log(e.target.files[0]);
					},
					changeAdr(e,item){//选择收货地址信息
						this.changeAdrJson = item;
						console.log($(e.currentTarget));
						$(e.currentTarget).parent().addClass("active").siblings().removeClass("active")
					},
					confirmAdr(){//确定选择收货地址信息
						if(jQuery.isEmptyObject(this.changeAdrJson)){
							layer.alert("您还没有选择收货地址！")
						}else{
							this.hiddenAddrass()
							this.showArass = this.changeAdrJson
						}
					},
					showAddrass(){//显示收货地址
						$(".newAddAddrass").slideDown(100)
					},
					hiddenAddrass(){//隐藏收货地址
						$(".newAddAddrass,.box-modal .sh-box-0.editAddrass").hide()
					},
					newAndEditAddrass(item,num,index){//新增收货地址
						this.editIndex = index;
						$(".box-modal .sh-box-0.editAddrass").show()
						this.clientInfo = item
					},
					editAdd(){//修改收货地址
						this.addrList[this.editIndex] = this.clientInfo;
						$(".box-modal .sh-box-0.editAddrass").hide()
					},
					delAdd(item,index){//删除收货地址
						layer.open({
							title:"收货地址删除提示！",
							icon:3,
							btn: ['确定', '取消'],
							content:"<span style='color:#ff6600'>您确定要删除该条收货地址？</span><br>"+item.clientName,
							yes:ins =>{
								layer.close(ins)
								this.addrList.splice(index,1)
							}
						});
					},
					cityCancel(){this.showCity = false;},//取消城市选择
					cityConfirm(){//确定城市选择
						this.clientInfo.city = province + city + region;
						this.cityCancel();
					},
					showCityChange(){//显示城市选择弹出层
						this.showCity = true;
					},
					changeCity(item,num,index){//选择城市 省-市-区
						if(num == 1){
							this.city = item.children;
							this.region = item.children[0].children;
							this.cityNumber.province = index;
							province = item.text;
						}else if(num == 2){
							this.region = item.children
							this.cityNumber.city = index;
							city = item.text;
						}else if(num == 3){
							this.cityNumber.region = index;
							region = item.text;
						}
					},
					hiddenFaBiao(){//隐藏发票类型弹出层
						this.faBiaoMode = true;
					},
					showFaBiaoModel(){//显示发票类型弹出层
						this.faBiaoMode = false;
					},
					changeFaBiao(e){
						console.log(this.FaBiao);
					},
					showChangeClass(){//选择商品分类
						if(this.show){
							setTimeout(()=>{
								this.show = false;
							},500)
						}else{
							this.show = true;
						}
					},
					handlEdit(item,comment){//给已添加商品写备注
						layer.prompt({title: '添加商品备注',value:comment, formType: 2}, (text, index)=>{
							layer.close(index);
							this.goodsList[item].comment = text;
						});
					},
					subtract(index){//删除已添加商品
						this.goodsList.splice(index,1)
						this.count()
					},
					contMin(index,unitPrice,quantity){//输入数量时重新计算小计
						if(quantity != ""){
							this.goodsList[index].subtotal = (parseFloat(quantity)*parseFloat(unitPrice)).toFixed(2)
							this.count();
						}
					},
					count(){//统计总金额
						this.countSum = 0;
						this.goodsList.forEach(item=>{
							this.countSum +=parseFloat(item.subtotal)
						})
					},
					showAddRow(){//显示选择商品弹出层
						$(".addModel").removeClass("hidden")
					},
					closeRow(){//隐藏选择商品弹出层
						$(".addModel").addClass("hiddens")
						setTimeout(function(){
							$(".addModel").removeClass("hiddens")
							$(".addModel").addClass("hidden")
						},300)
					},
					addRow(){//确定添加商品
						for (var i = 0; i < this.changeList.length; i++) {
							this.goodsList.push({
								picture:this.changeList[i].mtype,
								coding:this.changeList[i].userid,
								name:this.changeList[i].uname,
								specification:this.changeList[i].sex,
								quantity:this.changeList[i].scores,
								unit:"件",
								unitPrice:this.changeList[i].email,
								subtotal:(parseFloat(this.changeList[i].email)*parseFloat(this.changeList[i].scores)).toFixed(2),
								comment:"无"
							})
						}
						
						this.count()
						this.closeRow()
					}
				}
			})
		</script>
	</body>
</html>
